<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../js/jquery-3.6.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

      $(function (){

          $("#filter").click(function (){
              var usernameLength = $("#username").val().length
              if(usernameLength<10){
                  $("#message")
                      .html("正确")
                      .css("color","green")
              }else{
                  $("#message")
                      .html("too long")
                      .css("color","red")
              }
          })

          let checkboxSport = $(":checkbox[name=sport]")
          $("#selectAll").click(function (){
              checkboxSport
                  .prop("checked",true)
          })

          $("#selectNotAll").click(function (){
              checkboxSport
                  .prop("checked",false)
          })

          $("#otherSelect").click(function (){
              var checkStatue = checkboxSport
                  .prop("checked")

              if(checkStatue == true){
                  checkboxSport.prop("checked",false)
              }else{
                  checkboxSport.prop("checked",true)
              }
          })

          $("#addClass").click(function (){
              $("input:odd")
                  .addClass("changeColor")
                  .addClass("secondChangeColor")
          })

          $("#removeClass").click(function (){
              $("input:odd")
                  .removeClass("changeColor")
          })

          $("#foreach").click(function (){
              checkboxSport.each(function (){
                  alert($(this).val())
              })
          })


      })


    </script>
</head>
<body>


    用户名：<input type="text" id="username"/><span id="message"></span>
    <br/>
    运动：
    <input type="checkbox" name="sport" value="跳伞"/>跳伞
    <input type="checkbox" name="sport" value="攀岩"/>攀岩
    <input type="checkbox" name="sport" value="跑酷"/>跑酷
    <input type="checkbox" name="sport" value="蹦极"/>蹦极
    <br/>

    <input id="filter" type="button" value="验证用户名">
    <input type="button" id="selectAll" value="全选"/>
    <input type="button" id="selectNotAll" value="全不选"/>
    <input type="button" id="otherSelect" value="反选"/>
    <input type="button" id="addClass" value="添加class"/>
    <input type="button" id="removeClass" value="取消class"/>
    <input type="button" id="foreach" value="遍历复选框"/>

</body>
</html>